<template>
  <div>
    <el-form :inline="true" label-width="100px" class="demo-input-size" ref="ruleForms" :rules="rules" :model="editData">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="登录名" class="w-50 m-2">
            <el-input v-model="editData.userCode" placeholder="登录名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="editData.userName" placeholder="姓名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input v-model="editData.userPassword" placeholder="6-12位密码" show-password maxlength="12" minlength="6"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input v-model="editData.userPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input v-model="editData.userEmail"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="submit-class">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="celBtn">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
  import { ref, reactive, getCurrentInstance, toRef, onUpdated } from 'vue';
  const { proxy } = getCurrentInstance();
  const data = reactive({
    editData: {},
  });
  const props = defineProps({
    isShow: { type: Boolean, default: false },
    editData: { type: Object, default: {} },
  });
  data.editData = toRef(props, 'editData');
  const rules = ref({
    userCode: [{ required: true, message: '登录名', trigger: 'blur' }],
    userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  });

  const emits = defineEmits(['update:isShow', 'search']);
  const celBtn = () => {
    emits('update:isShow', false);
  };
  const handleSubmit = () => {
    console.log(data.editData);
    proxy.$api.user.editSysUser(data.editData).then(res => {
      if (res.code != -1) {
        proxy.$message({
          type: 'success',
          message: res.msg,
        });
        celBtn();
        emits('search');
      } else {
        proxy.$message({
          type: 'error',
          message: res.msg,
        });
      }
    });
  };
</script>
<style lang="scss" scoped>
  .submit-class {
    text-align: center;
    padding-top: 20px;
  }
</style>
